<template>
  <div class="q-pa-md q-gutter-sm">
    <t-button label="嵌套" color="primary" @click="alert = true" />

    <t-dialog v-model:show="alert" position="right" :maximized="true">
      <t-card class = "t-drawer-default">
        <t-card-section class="t-drawer-title">
          <div class="text-h6">这是一段标题</div>
          <t-icon
          size='24px'
          name='clear'
          color='rgb(25, 118, 210)'
          @click="alert = false">
        </t-icon>
        </t-card-section>
        <t-card-section>
          <div >这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本</div>
        </t-card-section>
            <t-card-section>
                <t-button label="弹出另一个抽屉" color="primary" @click="right = true" />
        </t-card-section>
      </t-card>
    </t-dialog>

     <t-dialog v-model:show="right" position="right" :maximized="true">
      <t-card class = "t-drawer-inception">
        <t-card-section class="t-drawer-title">
          <div class="text-h6">我是另一个抽屉</div>
          <t-icon
          size='24px'
          name='clear'
          color='rgb(25, 118, 210)'
          @click="right = false">
        </t-icon>
        </t-card-section>
        <t-card-section>
          <div >这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本这是一段超级长的文本</div>
        </t-card-section>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      alert: ref(false),
      right:ref(false)
    }
  }
}
</script>

<style scoped>
    .tr-dialog {
      width: 100%;
    }
    button.q-btn--dense{
      min-height: auto;
    }
    .tr-dialog .q-dialog__backdrop {
      background: rgba(0, 0, 0, 0.4);
    }

    .tr-dialog .q-dialog__inner>div {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
      border-radius: 2px;
    }
    .t-drawer-default{
    width:400px;
    height:100%;
    padding:16px;
    background:#FFFFFF
    }
    .t-drawer-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .t-drawer-inception{
      width:350px;
    height:100%;
    padding:16px;
    background:#FFFFFF
    }
@media (min-width: 768px) {
  .q-dialog__inner--minimized>.teld_generate_code_open_fas_page_popup {
    max-width: 100vw;
  }

  .teld_generate_code_open_drawer {
    padding: 0;
  }

  .teld_generate_code_open_drawer .q-dialog__title {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid#f0f2f5 !important;
  }

  .teld_generate_code_open_drawer .q-dialog__title .q-msg-container {
    font-size: 18px;
    font-weight: 600;
  }

  .teld_generate_code_open_drawer .q-close__icon {
    top: 22px !important;
  }

  .teld_generate_code_open_drawer .q-card__section+.q-dialog__message {
    padding: 0 !important;
  }

   /* popup 场景 */
  .teld_generate_code_open_fas_page_popup {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    .q-dialog__message {
      flex: 1 1 auto;
      overflow: auto;
      padding: 0 !important;
    }
    .q-dialog__title {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      border-bottom: 1px solid#f0f2f5 !important;
      flex: none;
      .q-msg-container {
        font-size: 18px;
        font-weight: 600;
      }
    }

    .q-close__icon {
      top: 22px !important;
    }

  }
}
</style>
